<!-- 拼团 -->
<template>
  <div class="box">
    <div class="main">
      <div class="main-content">
        <div class="main-title">—团长权益—</div>
        <div style="margin-top:45px;margin-bottom:10px;padding-top: 45px;">
          <uni-steps :options="[{title:'激活',desc:'推广权益'},{title:'获得',desc:'成团奖励'},{title:'获得',desc:'福豆收益'},{title:'尊享',desc:'商城分红'}]" direction="row"></uni-steps>
        </div>
        <div class="main-group" v-for="item in getGroupData" :key="item.id">
          <div class="main-group-img" @click="addOrder(item)">
            <img :src="item.thumbnail" />
          </div>
          <div class="flex1 pl10" @click="addOrder(item)">
            <div>{{item.name}}</div>
            <!-- <view>赠送多元素精油3盒</view> -->
            <div class="main-group-flex mt10" style="justify-content: flex-end;">
              <div>已团{{item.monthSale}}件</div>
            </div>
            <div class="main-group-flex">
              <div>￥{{item.retailPrice?formatMoney(item.retailPrice,2):0}}</div>
              <div @click="addOrder(item)">我要开团</div>
            </div>
          </div>
        </div>
        <div class="main-group-step">
          <div class="tac font-size34">拼团怎么玩</div>
          <div class="main-group-num">
            <div class="main-flex">
              <div>
                <div>1</div>
              </div>
              <div>我要开团</div>
            </div>
            <div class="main-flex">
              <div>
                <div>2</div>
              </div>
              <div>支付开团</div>
            </div>
            <div class="main-flex">
              <div>
                <div>3</div>
              </div>
              <div>邀请参团</div>

            </div>
            <div class="main-flex">
              <div>
                <div>4</div>
              </div>
              <div>拼团成功</div>
            </div>
          </div>
          <!-- <div class="mt15">
            <button type="primary" size="mini" class="bg-red button-style">邀请好友参团</button>
            <button type="warn" class="bg-yellow mt16 button-style" size="mini">生成图片二维码</button>
            <div class="tac mt15">
              <img src="../../static/img/group/qrcode.png" />
            </div>
          </div> -->
        </div>
        <div class="main-group-bottom">
          <div class="flex1 tac" v-for="i in 5" :key="i">
            <img src="@/assets/images/60x60.png" />
          </div>
          <div class="flex1 tac" v-for="i in 2" :key="i+22">
            <span class="main-group-bg">
              ?
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import uniSteps from './step'
import request from '../utils'
export default {
  components: { uniSteps },
  data () {
    return {
      data: {
        pageSize: 10,
        currentPage: 1,
      },
      getGroupData: [],
      sharerId: this.$route.query.sharerId ? this.$route.query.sharerId : '',
    }
  },
  methods: {
    formatMoney (num, n) {
      num = Number(num).toFixed(n);
      let re = /(-?\d+)(\d{3})/;
      while (re.test(num)) {
        num = num.replace(re, "$1,$2");
      }
      return num;
    },
    // 获取商品详情
    async getGroupList () {
      this.$dialog.loading.open('加载中...');
      const url = '/item/queryPageTeam'
      const result = await request.post(url, this.data)
      if (result.code == 200) {
        this.$dialog.loading.close();
        this.getGroupData = result.data
      } else {
        this.$dialog.loading.close();
        this.$dialog.toast({ mes: result.msg, icon: 'error', timeout: 2500 });
      }
    },
    init () {
      const flag = this.$route.query.flag || ''
      if (flag === 'tips') {
        this.$dialog.confirm({
          title: '提示',
          mes: '你已注册成功，请直接下载APP体验！',
          opts: [{
            txt: '我再想想',
            color: false,
          }, {
            txt: '下载App',
            color: true,
            callback: () => {
              this.downApp();//下载App
            }
          }
          ]
        });
      }
    },

    // 开团
    addOrder (item) {
      const server = request.server
      window.location.href = `${server}/web/team/auth?sharerId=${this.sharerId}`
    },
    //根据终端下载App
    async downApp () {
      var u = navigator.userAgent
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      let url = ''
      if (isAndroid) {
        url = '/api/version/get/ANDROID_URL'
      }
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        url = '/api/version/get/IOS_URL'
      }
      const result = await request.getData(url)
      if (result.code == 200) {
        window.location.href = result.data.url
      }
    }
  },
  mounted () {
    this.getGroupList();
    this.init();
  }
}
</script>
<style scoped>
.mt10 {
  margin-top: 10px;
}

.font-size34 {
  font-size: 18px;
}
.tac {
  text-align: center;
}
.box {
  background: linear-gradient(#f8b43a, #e66465) !important;
  height: 100vh;
  overflow: auto;
}
.mt15 button {
  line-height: 2;
}
.main {
  width: 100%;
  padding: 30px 15px 15px;
}
.main-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 0px 10px 10px;
}
.main-title {
  position: absolute;
  left: 50%;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  background: #fff;
  color: #e66465;
  font-size: 18px;
  padding: 0px 25px;
  box-shadow: 2px 2px 2px #d9d9d9;
  transform: translate(-50%, -50%);
}
.main-group {
  padding-top: 20px;
  display: flex;
  align-items: center;
}
.main-group-img {
  flex: 0 0 110px;
}
.main-group-img img {
  width: 100px;
  height: 100px;
  border-radius: 5px;
}
.main-group-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex1 {
  flex: 1;
  overflow: hidden;
}
.flex1 div:nth-of-type(1) {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  font-size: 16px;
}
.flex1 div:nth-of-type(2) div {
  margin-top: 5px;
  color: #e66465;
  background: #fef2ef;
  border-radius: 20px;
  font-size: 14px;
  padding: 2px 15px;
}
.flex1 div:nth-of-type(3) {
  padding-top: 10px;
}
.flex1 div:nth-of-type(3) div:first-child {
  color: #e66465;
  font-size: 20px;
  font-weight: 700;
}
.flex1 div:nth-of-type(3) div:last-child {
  color: #fff;
  background: #e66465;
  border-radius: 20px;
  font-size: 14px;
  padding: 2px 25px;
  box-shadow: 2px 2px 2px #d9d9d9;
}
.main-group-step {
  margin-top: 15px;
  background: #fef2ef;
  padding: 30px 10px;
}
.main-group-num {
  display: flex;
  justify-content: space-around;
  padding-top: 15px;
}
.main-flex {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-flex div:nth-of-type(1) div {
  width: 40px;
  height: 40px;
  line-height: 40px;
  box-shadow: 2px 2px 2px #d9d9d9;
  background: linear-gradient(#f8b43a, #e66465);
  color: #fff;
  font-size: 16px;
  border-radius: 100%;
}
.main-flex div:nth-of-type(2) {
  padding-top: 10px;
  font-size: 14px;
}
.main-group-bottom {
  margin-top: 10px;
  display: flex;
}
.flex1 img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.main-group-bg {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 100%;
  display: inline-block;
  color: #e66465;
  font-size: 20px;
  background: #fef2ef;
}
.mt15 img {
  width: 180px;
  height: 180px;
}
.button-style {
  width: 100%;
  padding: 3px 0px;
}
</style>
